<template class="header">
    <div style="height:50px;line-hegint:50px;border-bottom:1px solid #ccc;display:flex;">
        <div style="width:200px;padding-left:30px;padding-top:10px;font-weight:bold;color:#409eff;">后台管理</div>
        <div style="flex:0.97;"></div>
        <div style="margin:6px 0;">
            <el-avatar icon="el-icon-user-solid" style="width:180%;height:80%;"></el-avatar>
        </div>
        <div style="width:100px;padding-left:30px;padding-top:10px;">
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Header",
        data() {
            return {
                userInfo: {
                    id: '',
                    username: ''
                }
            }
        },

        methods: {
            getUserInfo() {
                // console.log("getUserInfo")
                this.$axios.get("/sys/userInfo")
                    .then(res => {
                        this.userInfo = res.data.data
                    })
            },
            logout() {
                this.$axios.post("/logout").then(res => {
                    localStorage.clear()
                    sessionStorage.clear()
                    this.$store.commit("resetState")
                    this.$router.replace("/login")
                    location.reload()
                })
            }
        },
        created() {
            this.getUserInfo()
        }
    }
</script>

<style scoped>
    .el-dropdown-link {
        display: flex;
        justify-content: space-around;
    }
</style>

